<template>
  <FIPanel class="info-form" :usePadding="false">
    <div class="info-form__header">
      <div class="info-form__header-title">{{ title }}</div>
      <div class="info-form__header-right">
        <FIButton v-if="type !== 'info'" id="saveProject" border @click="submitForm(ruleFormRef)"></FIButton>
        <FIButton v-if="type !== 'info'" @click="handleCancel"> 取消 </FIButton>
        <!-- v-if="type === 'info' && level == 2" -->
        <FIButton
          v-if="type === 'info' && level != 1"
          id="updateProject"
          style="margin-right: 10px"
          border
          @click="handleModify"
        ></FIButton>
        <FIPopconfirmBtn
          v-if="type === 'info' && level != 1"
          class="margin-right10"
          title="您是否确认要删除该条数据吗？"
          buttonText="删除"
          :btn-binds="{ id: 'deleteProject', border: true }"
          @confirm="handleDelete"
        >
        </FIPopconfirmBtn>
      </div>
    </div>
    <div class="info-form__line"></div>
    <!-- 项目信息 -->
    <el-form
      v-if="(level == 1 && type === 'add') || (level == 2 && type !== 'add')"
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      class="info-form__body"
      status-icon
    >
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="项目编码" prop="projectEname">
            <el-input v-model="ruleForm.projectEname" :disabled="type !== 'add'" /> </el-form-item
        ></el-col>
        <el-col :span="12">
          <el-form-item label="项目名称" prop="projectCname">
            <el-input v-model="ruleForm.projectCname" :disabled="type === 'info'" /> </el-form-item
        ></el-col>
        <el-col :span="12" class="margin-top10">
          <el-form-item label="项目描述" prop="projectDesc">
            <el-input v-model="ruleForm.projectDesc" type="area" :disabled="type === 'info'" /> </el-form-item
        ></el-col>
        <el-col :span="12" class="margin-top10"
          ><el-form-item label="创建人" prop="recCreator">
            <el-input v-model="ruleForm.recCreator" disabled /> </el-form-item
        ></el-col>
        <el-col :span="12" class="margin-top10">
          <el-form-item label="创建时间" prop="recCreateTime">
            <el-input v-model="ruleForm.recCreateTime" disabled /> </el-form-item
        ></el-col>
        <el-col :span="12" class="margin-top10">
          <el-form-item label="修改人" prop="recRevisor">
            <el-input v-model="ruleForm.recRevisor" disabled /> </el-form-item
        ></el-col>
        <el-col :span="12" class="margin-top10">
          <el-form-item label="修改时间" prop="recReviseTime">
            <el-input v-model="ruleForm.recReviseTime" disabled /> </el-form-item
        ></el-col>
      </el-row>
    </el-form>
    <!-- 一级模块信息 -->
    <el-form
      v-if="(level == 2 && type === 'add') || (level == 3 && type !== 'add')"
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      class="info-form__body"
      status-icon
    >
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="一级模块编码" prop="moduleEname1">
            <el-input v-model="ruleForm.moduleEname1" :disabled="type !== 'add'" /> </el-form-item
        ></el-col>
        <el-col :span="12">
          <el-form-item label="一级模块名称" prop="moduleCname1">
            <el-input v-model="ruleForm.moduleCname1" :disabled="type === 'info'" /> </el-form-item
        ></el-col>
        <el-col :span="12" class="margin-top10"
          ><el-form-item label="模块上下文" prop="contextPath">
            <el-input v-model="ruleForm.contextPath" :disabled="type === 'info'" /> </el-form-item
        ></el-col>
        <el-col :span="12" class="margin-top10"
          ><el-form-item label="创建人" prop="recCreator">
            <el-input v-model="ruleForm.recCreator" disabled /> </el-form-item
        ></el-col>
        <el-col :span="12" class="margin-top10">
          <el-form-item label="创建时间" prop="recCreateTime">
            <el-input v-model="ruleForm.recCreateTime" disabled /> </el-form-item
        ></el-col>
        <el-col :span="12" class="margin-top10">
          <el-form-item label="修改人" prop="recRevisor">
            <el-input v-model="ruleForm.recRevisor" disabled /> </el-form-item
        ></el-col>
        <el-col :span="12" class="margin-top10">
          <el-form-item label="修改时间" prop="recReviseTime">
            <el-input v-model="ruleForm.recReviseTime" disabled /> </el-form-item
        ></el-col>
      </el-row>
    </el-form>
    <!-- 二级模块信息 -->
    <el-form
      v-if="(level == 3 && type === 'add') || (level == 4 && type !== 'add')"
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      class="info-form__body"
      status-icon
    >
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="二级模块编码" prop="moduleEname2">
            <el-input v-model="ruleForm.moduleEname2" :disabled="type !== 'add'" /> </el-form-item
        ></el-col>
        <el-col :span="12">
          <el-form-item label="二级模块名称" prop="moduleCname2">
            <el-input v-model="ruleForm.moduleCname2" :disabled="type === 'info'" /> </el-form-item
        ></el-col>
        <el-col :span="12" class="margin-top10"
          ><el-form-item label="创建人" prop="recCreator">
            <el-input v-model="ruleForm.recCreator" disabled /> </el-form-item
        ></el-col>
        <el-col :span="12" class="margin-top10">
          <el-form-item label="创建时间" prop="recCreateTime">
            <el-input v-model="ruleForm.recCreateTime" disabled /> </el-form-item
        ></el-col>
        <el-col :span="12" class="margin-top10">
          <el-form-item label="修改人" prop="recRevisor">
            <el-input v-model="ruleForm.recRevisor" disabled /> </el-form-item
        ></el-col>
        <el-col :span="12" class="margin-top10">
          <el-form-item label="修改时间" prop="recReviseTime">
            <el-input v-model="ruleForm.recReviseTime" disabled /> </el-form-item
        ></el-col>
      </el-row>
    </el-form>
  </FIPanel>
</template>
<script lang="ts" setup>
import { reactive, watch, ref, computed, PropType, onMounted } from 'vue'
import FIPanel from '@/components/FIPanel.vue'
import FIButton from '@/components/FIButton.vue'
import FIPopconfirmBtn from '@/components/FIPopconfirmBtn.vue'

const props = defineProps({
  // 表单类型，修改: moidify  添加: add
  type: {
    type: String as PropType<'modify' | 'add' | 'info'>,
    default: 'info',
    required: true,
    validator(value: string) {
      return ['modify', 'add', 'info'].includes(value)
    },
  },
  // 当前点击的level层级
  level: {
    type: [Number, String] as PropType<number | string>,
    default: 1,
    required: true,
    validator(value: number | string) {
      return typeof value === 'string' || (typeof value === 'number' && value >= 1 && value <= 4)
    },
  },
  //  选中节点对象
  nodeInfo: {
    type: Object,
    required: true,
  },
})
const emit = defineEmits(['handle-delete', 'handle-save', 'update:type'])
const ruleFormRef = ref(null)

const ruleForm = ref({
  projectEname: '',
  projectCname: '',
  leader: '',
  recCreator: '',
  recCreateTime: '',
  contextPath: '',
  projectDesc: '',
  recRevisor: '',
  recReviseTime: '',
  moduleEname1: '',
  moduleCname1: '',
  moduleEname2: '',
  moduleCname2: '',
})
const rules = reactive({
  projectEname: [{ required: true, message: '请输入', trigger: 'blur' }],
  projectCname: [{ required: true, message: '请输入', trigger: 'blur' }],
  contextPath: [{ required: true, message: '请输入', trigger: 'blur' }],
  // routePath: [{ required: true, message: '请输入', trigger: 'blur' }],
  projectDesc: [{ required: false, message: '请输入', trigger: 'blur' }],
  moduleEname1: [{ required: true, message: '请输入', trigger: 'blur' }],
  moduleCname1: [{ required: true, message: '请输入', trigger: 'blur' }],
  moduleEname2: [{ required: true, message: '请输入', trigger: 'blur' }],
  moduleCname2: [{ required: true, message: '请输入', trigger: 'blur' }],
})

const submitForm = async (formEl: any) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log(ruleForm.value, 'wsj')
      emit('handle-save', ruleForm.value)
    } else {
    }
  })
}
const handleModify = () => {
  emit('update:type', 'modify')
}
const handleCancel = () => {
  emit('update:type', 'info')
}

const handleDelete = () => {
  emit('handle-delete')
}
watch(
  () => props.nodeInfo,
  () => {
    initRuleForm()
  },
  { deep: true }
)
// watch(
//   () => props.type,
//   () => {
//     initRuleForm()
//   },
//   { deep: true }
// )
const initRuleForm = () => {
  let infoObj = props.nodeInfo
  console.log('wsj1111111111', infoObj)
  if (props.type === 'add') {
    if (props.level == 1) {
      ruleForm.value = {
        projectEname: '',
        projectCname: '',
        contextPath: '',
        // routePath: '',
        projectDesc: '',
        recCreator: '',
        recCreateTime: '',
        recRevisor: '',
        recReviseTime: '',
      }
    } else {
      if (props.level == 2) {
        ruleForm.value = {
          projectEname: infoObj?.projectEname,
          moduleEname1: infoObj?.moduleEname1,
          moduleCname1: infoObj?.moduleCname1,
          recCreator: infoObj?.recCreator,
          recCreateTime: infoObj?.recCreateTime,
          recRevisor: infoObj?.recRevisor,
          recReviseTime: infoObj?.recReviseTime,
        }
      } else if (props.level == 3) {
        ruleForm.value = {
          moduleEname1: infoObj?.moduleEname1,
          moduleEname2: infoObj?.moduleEname2,
          moduleCname2: infoObj?.moduleCname2,
          recCreator: infoObj?.recCreator,
          recCreateTime: infoObj?.recCreateTime,
          recRevisor: infoObj?.recRevisor,
          recReviseTime: infoObj?.recReviseTime,
        }
      }
    }
  } else {
    if (props.level == 1) {
      ruleForm.value = {
        projectEname: '',
        projectCname: '',
        contextPath: '',
        // routePath: '',
        projectDesc: '',
        recCreator: '',
        recCreateTime: '',
        recRevisor: '',
        recReviseTime: '',
      }
    }else if (props.level == 2) {
      ruleForm.value = {
        projectEname: infoObj?.projectEname,
        projectCname: infoObj?.projectCname,
        contextPath: infoObj?.contextPath,
        leader: infoObj?.leader,
        // routePath: infoObj?.routePath,
        projectDesc: infoObj?.projectDesc,
        recCreator: infoObj?.recCreator,
        recCreateTime: infoObj?.recCreateTime,
        recRevisor: infoObj?.recRevisor,
        recReviseTime: infoObj?.recReviseTime,
      }
    } else if (props.level == 3) {
      ruleForm.value = {
        leader: infoObj?.leader,
        projectEname: infoObj?.projectEname,
        moduleEname1: infoObj?.moduleEname1,
        moduleCname1: infoObj?.moduleCname1,
        contextPath: infoObj?.contextPath,
        recCreator: infoObj?.recCreator,
        recCreateTime: infoObj?.recCreateTime,
        recRevisor: infoObj?.recRevisor,
        recReviseTime: infoObj?.recReviseTime,
      }
    } else if (props.level == 4) {
      ruleForm.value = {
        leader: infoObj?.leader,
        moduleEname1: infoObj?.moduleEname1,
        moduleEname2: infoObj?.moduleEname2,
        moduleCname2: infoObj?.moduleCname2,
        recCreator: infoObj?.recCreator,
        recCreateTime: infoObj?.recCreateTime,
        recRevisor: infoObj?.recRevisor,
        recReviseTime: infoObj?.recReviseTime,
      }
    }
  }
}
const title = computed(() => {
  let prefixStr = ''
  let suffixStr = ''
  if (props.type === 'add') {
    switch (props.level) {
      case 1:
        suffixStr = '项目'
        break
      case 2:
        suffixStr = '一级模块'
        break
      case 3:
        suffixStr = '二级模块'
        break
      default:
        suffixStr = '项目'
    }
  } else {
    switch (props.level) {
      case 1:
        suffixStr = '后端项目模块树'
        break
      case 2:
        suffixStr = '项目'
        break
      case 3:
        suffixStr = '一级模块'
        break
      case 4:
        suffixStr = '二级模块'
        break
      default:
        suffixStr = '--'
    }
  }
  if (props.type === 'add') {
    prefixStr = '添加'
  } else if (props.type === 'modify') {
    prefixStr = '编辑'
  } else {
    prefixStr = ''
    suffixStr = suffixStr + '信息'
  }
  return prefixStr + suffixStr
})

onMounted(() => {
  initRuleForm()
})
</script>
<style scoped lang="less">
.info-form {
  padding: 16px 32px;
}
.info-form__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .info-form__header-title {
    font-size: 16px;
    color: #303133;
    line-height: 28px;
    text-align: left;
    font-weight: bold;
  }
}
.info-form__header-right {
  display: flex;
  align-items: center;
}
.info-form__line {
  margin: 15px -32px;
  height: 1.2px;
  background: #e8e8e8;
  width: calc(100% + 64px);
}
.info-form__body {
  padding: 20px 60px;
}
</style>
